<template>
	<view class="GeDan">
		<slot></slot>
		<view class="GeDancontainer">
			<view class="inside" v-for="(item,index) in GeDan" :key="index" @click="jump(item.id)">
				<!--  #ifdef  MP-WEIXIN -->
				<image :src="item.coverImgUrl"></image>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN -->
				<img v-lazy="item.coverImgUrl">
				<!--  #endif -->
				<view class="text">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			GeDan: {
				type: Array
			}
		},
		methods: {
			jump(id) {
				this.$emit('jump', id)
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss">
	.GeDan {
		width: 100%;
		margin-top: 40rpx;

		.GeDancontainer {
			margin-top: 70rpx;
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.inside {
				width: 30%;
				height: 320rpx;
				// background: pink;
				margin-bottom: 30rpx;

				/*  #ifdef  MP-WEIXIN  */
				image {
					width: 100%;
					height: 224rpx;
				}

				/*  #endif  */
				/*  #ifndef  MP-WEIXIN  */
				img {
					width: 100%;
					height: 224rpx;
				}

				/*  #endif  */
				.text {
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					word-break: normal;
				}
			}
		}
	}
</style>
